<meta charset="UTF-8">
<style>
    ul{
        background-color: pink;
    }
    li{
        background-color: skyblue;
        margin: 20px;
    }
    .tip{
        height: 30px;
        width: 200px;
        border-radius: 6px;
        background-color: aqua;
        text-align: center;
        line-height: 30px;
        position: absolute;
        display: none;
        pointer-events:none;
    }
    .tip-bottom{
        position: absolute;
        bottom: -15px;
        left: 50%;
        /* margin-left: -15px; */
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 15px solid aqua;
        
    }
</style>





<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>
<div class="tip">我是li方法
    <div class="tip-bottom"></div>
</div>


<script>
    var ulObj = document.querySelector('ul')
    var tipObj = document.querySelector('.tip')
    var liObj = document.querySelectorAll('li')
liObj.forEach(function(item, index) {
        item.onmousemove = function(evt) {
            var e = evt || window.event

            tipObj.style.display = 'block'
            // tip.className = 'title-div'
            tipObj.style.left = e.clientX - tipObj.clientWidth/2+'px'
            tipObj.style.top =  e.clientY - tipObj.clientHeight/2 -35 +'px'
            
        }
    })
    ulObj.onmouseout = function() {
        tipObj.style.display = 'none'
    }
    
    </script>